<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宿舍管理系统</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath }/statics/images/logo.jpg"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/sccl.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js" ></script>
<style type="text/css">
 .drag{
   width: 270px;
   height: 40px;
   line-height: 40px;
   background-color: #e8e8e8;
   position: relative;
   margin:0 auto;
  }
  .bg{
   width:40px;
   height: 100%;
   position: absolute;
   background-color: #75CDF9;
  }
  .text{
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
   user-select: none;
  }
  .btn{
   width:40px;
   height: 38px;
   position: absolute;
   border:1px solid #ccc;
   cursor: move;
   font-family: "宋体";
   text-align: center;
   background-color: #fff;
   user-select: none;
   color:#666;
  }
</style>
<script type="text/javascript">
 
  //一、定义一个获取DOM元素的方法
	  var yanzheng="";
  $(document).ready(function(){
	  
  var $ = function(selector){
    return document.querySelector(selector);
   },
   box = $(".drag"),//容器
   bg = $(".bg"),//背景
   text = $(".text"),//文字
   btn = $(".btn"),//滑块
   success = false,//是否通过验证的标志
   distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离）
  //二、给滑块注册鼠标按下事件
  btn.onmousedown = function(e){
   //1.鼠标按下之前必须清除掉后面设置的过渡属性
   btn.style.transition = "";
   bg.style.transition ="";
   //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。
   //2.当滑块位于初始位置时，得到鼠标按下时的水平位置
   var e = e || window.event;
   var downX = e.clientX;
   //三、给文档注册鼠标移动事件
   document.onmousemove = function(e){
    var e = e || window.event;
    //1.获取鼠标移动后的水平位置
    var moveX = e.clientX;
    //2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
    var offsetX = moveX - downX;
    //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
    if( offsetX > distance){
     offsetX = distance;//如果滑过了终点，就将它停留在终点位置
    }else if( offsetX < 0){
     offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
    }
    //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
    btn.style.left = offsetX + "px";
    bg.style.width = offsetX + "px";
    //如果鼠标的水平移动距离 = 滑动成功的宽度
    if( offsetX == distance){
     //1.设置滑动成功后的样式
     text.innerHTML = "验证通过";
     text.style.color = "#fff";
     btn.innerHTML = "√";
     btn.style.color = "green";
     bg.style.backgroundColor = "lightgreen";
     //2.设置滑动成功后的状态
     success = true;
     //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
     btn.onmousedown = null;
     document.onmousemove = null;
     //3.成功解锁后的回调函数
     setTimeout(function(){
      //alert('解锁成功！');
     },100);
    }
   }
   //四、给文档注册鼠标松开事件
   document.onmouseup = function(e){
    //如果鼠标松开时，滑到了终点，则验证通过
    if(success){
    yanzheng="success";
     return;
    }else{
     //反之，则将滑块复位（设置了1s的属性过渡效果）
     btn.style.left = 0;
     bg.style.width = 0;
     btn.style.transition = "left 1s ease";
     bg.style.transition = "width 1s ease";
    }
    //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
    document.onmousemove = null;
    document.onmouseup = null;
   }
  }
	
   
   
  
  });
	$(function() {
		$("#username").blur(function() {
			var username=$("#username").val();
			if(username==null||username==""){
				$(".clear").text("用户名不能为空！");
			}
			$.get("${pageContext.request.contextPath}/users/ajaxUserName",
					{"username":username},
					function(data) {
						if(data!=null){
						}else{
							$(".clear").text("用户名不存在，请重新输入！");
						}
					})
		}).focus(function() {
			$(".clear").text("");
		})
		$("#password").blur(function() {
			var pattr=/^[a-zA-Z]\w{5,17}$/;
			var password=$("#password").val();
			if(password==null||password==""){
				$(".clear").text("密码不能为空！");
			}else if(!pattr.test(password)){
				$(".clear").html("密码格式不正确！");
			}
		}).focus(function() {
			$(".clear").text("");
		})
		$("#form1").submit(function() {
			var username=$("#username").val();
			if(username==null||username==""){
				$(".clear").text("用户名不能为空！");
				return false;
			}
			var pattr=/^[a-zA-Z]\w{5,17}$/;
			var password=$("#password").val();
			if(password==null||password==""){
				$(".clear").text("密码不能为空！");
				return false;
			}else if(!pattr.test(password)){
				$(".clear").html("密码格式不正确！");
				return false;
			}
			if(yanzheng!="success"){
				$(".clear").html("请滑动验证码进行验证！");
				return false;
			}
		})
	})
</script>

</head>
<body class="login-bg">
    <div class="login-box">
        <header>
            <h1>宿舍管理系统</h1>
        </header>
        <div class="login-main" id="usernameandpassword">
			<form id="form1" action="${pageContext.request.contextPath}/users/login" class="layui-form" method="post">
				<input name="__RequestVerificationToken" type="hidden" value="">                
				<div class="layui-form-item">
					<label class="login-icon">
						<i class="layui-icon"><img src="${pageContext.request.contextPath}/statics/images/username.png" style="width: 20px;" height="20px;" alt="" /></i>
					</label>
					<input type="text" name="username" id="username" lay-verify="userName" autocomplete="off" placeholder="请输入登录名" class="layui-input" value="${username}">
					<a href="#" id="youxiang">邮箱快捷登录</a><span>||</span><a href="${pageContext.request.contextPath}/users/ToPhoneLogin">手机号登录</a>
				</div>
				<div class="layui-form-item">
					<label class="login-icon">
						<i class="layui-icon"><img src="${pageContext.request.contextPath}/statics/images/password.png" style="width: 20px;" height="20px;" alt="" /></i>
					</label>
					<input type="password" id="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码字母开头6-8位字符" class="layui-input">
				</div>
				
				<!-- 滑块开始 -->
					<div class="drag">
  					<div class="bg"></div>
  					<div class="text" onselectstart="return false;" style="color: #000;">请拖动滑块验证</div>
  					<div class="btn">>></div>
					</div>
				<!-- 滑块结束 -->
				<br />
				<script type="text/javascript">
					$(function() {
						$(".forgetpassword").click(function() {
							var name=$("#username").val();
							location.href="${pageContext.request.contextPath}/users/toforgetpassword?name="+name;
						})
					})
				</script>
				<div class="layui-form-item">
					<div class="pull-left login-remember">
						<label><a class="forgetpassword" href="#">忘记密码？</a></label>
						<label><a href="${pageContext.request.contextPath}/users/toaddusers">还没有账号？</a></label>

						
					</div>
					<div class="pull-right">
					<input type="submit" value="登录 &nbsp;&nbsp;" class="layui-btn layui-btn-primary"/>
					</div>
					<div class="clear" style="color: red;">${message}</div>
				</div>
			</form>        
		</div>
        
        
        
        
        <!-- 邮箱登录开始 -->
        <script type="text/javascript">
        	$(function() {
				$("#emailandpassword").hide();
				$("#youxiang").click(function() {
					$("#emailandpassword").show();
					$("#usernameandpassword").hide();
				})
				$("#huoquyanzhengma").click(function() {
					var email=$("#email").val();
					var part=/^\d{5,12}@[qQ][qQ]\.(com|cn)$/;
					if(email==null||email==""){
						$(".clear").html("请输入邮箱后再发送验证码");
					}else if(!part.test(email)){
						$(".clear").html("邮箱格式不正确");
					}else if(part.test(email)){
						$.get("${pageContext.request.contextPath}/users/ishaveemail",
								{"email":email},
								function(data) {
									if(data==null){
										$(".clear").html("经检测此邮箱还未注册");
									}else{
										$.get("${pageContext.request.contextPath}/users/ajaxemail",
												{"email":email},
												function(data) {
													$("#data").val(data);
												})
									}
								})
						
					}	
				})
				$("#emaillogin").click(function() {
					var a=$("#yanzhengma").val();
					var data=$("#data").val();
					var email=$("#email").val();
					if(a==null||a==""){
						$(".clear").html("请输入验证码！");
					}else if(a!=data){
						$(".clear").html("验证码不正确！");
					}else{
						location.href="${pageContext.request.contextPath}/users/emaillogin?email="+email;
					}
				})
			})
		</script>
        	<div class="login-main" id="emailandpassword">
			<form action="#" class="layui-form" method="post">
				<input name="__RequestVerificationToken" type="hidden" value="">                
				<div class="layui-form-item">
					<label class="login-icon">
						<i class="layui-icon"><img src="${pageContext.request.contextPath}/statics/images/username.png" style="width: 20px;" height="20px;" alt="" /></i>
					</label>
					<input type="text" name="text" id="email" lay-verify="userName" autocomplete="off" placeholder="请输入有效邮箱" class="layui-input" value="">
					<a href="">账号密码登录</a>
				</div>
				<div class="layui-form-item" style="width: 139px;">
					<label class="login-icon">
						<i class="layui-icon"><img src="${pageContext.request.contextPath}/statics/images/password.png" style="width: 20px;" height="20px;" alt="" /></i>
					</label>
					<input type="text" id="yanzhengma" name="yanzhengma" lay-verify="password" autocomplete="off" placeholder="请输入验证码" class="layui-input" >
					<input type="hidden" id="data" value="" />
				</div>
				<div class="pull-right" style="position:absolute; top:360px;right: 822px;">
					<input type="button" id="huoquyanzhengma" value="获取验证码 " class="layui-btn layui-btn-primary"/>
				</div>
				<br />
				<div class="layui-form-item">
					<div class="pull-left login-remember">
						<label><!-- <a href="">忘记密码？</a> --></label>
					</div>
					<div class="pull-right">
					<input type="button" id="emaillogin" value="登录 &nbsp;&nbsp;" class="layui-btn layui-btn-primary"/>
					</div><br />
					<div class="clear" style="color: red;">${message}</div>
				</div>
			</form>        
		</div>
        <!-- 邮箱登录结束-->
        
        
        
    </div>
   
  </body>
</html>